/*
 * @Author: 脉迈
 * @Date: 2021-08-05 18:24:32
 * @LastEditors: 脉迈
 * @LastEditTime: 2022-01-25 17:08:11
 */

import { componentsStylesType } from "data/common-style";

interface messageData {
  data: any;
}
/**
 * @description 监听编辑器发过来的数据
 * @parmas any
 * @return null
 */
export const listenMessage = () => {
  window.addEventListener("message", (event) => {
    let data = event.data;
    if (data.type === "CC") {
      // 更新当前操作的组件
    }
  });
};
/**
 * @description 发送数据给编辑器
 * @parmas any
 * @return null
 */
export const postMessage = (data: messageData) => {
  if (window.self === window.top) {
    console.warn("请在编辑器内使用");
  } else {
    // 编辑器里面
    window.parent.postMessage(data, "*");
  }
};

/**
 * !#zh 将 px 转换为 rem
 * 基准值：设计稿分成10份（设计稿/10）
 * 设计稿px / 基准值
 * @param {Number} px
 */
export const px2Rem = (px: number) => {
  const DESIGN_DRAFT_WIDTH = 375;
  const rem = px / (DESIGN_DRAFT_WIDTH * (100 / 750)) + "rem";
  return rem;
};

/**
 *
 * @param {Number} px 元素的某个属性的像素值，比如 height
 * @param {Boolean} isToRem 是否将 px 转换为 rem
 */
export const parsePx = (px: number, isRem: boolean = false) => {
  if (isRem) return px2Rem(px);
  return px;
};

/**
 * 把组件的props属性转化出来
 * @param properties 组件里面内容属性
 */
export const transformProps = (properties: any) => {
  let props: any = {};
  for (const key in properties) {
    if (Object.prototype.hasOwnProperty.call(properties, key)) {
      const element = properties[key];
      props[key] = element.value;
    }
  }
  return props;
};

/**
 * @descript 组件存储的style转化
 * @param   @type style的样式属性
 */

export const transformStyle: any = (style: any) => {
  let styles: componentsStylesType | any = {};
  styles = { ...style };

  styles["top"] = px2Rem(styles["top"]);
  styles["left"] = px2Rem(styles["left"]);
  styles["width"] = px2Rem(styles["width"]);
  styles["height"] = px2Rem(styles["height"]);
  // eslint-disable-next-line
  styles["zIndex"] = styles["zIndex"];
  return styles;
};

/**
 *
 * @descript 判断是否为移动端
 */

const userAgent = navigator.userAgent.toLowerCase();

export const isMobile = /mobile/i.test(userAgent);

export const getSession = (key: string) =>
  JSON.parse(sessionStorage.getItem(key) || "{}");
export const saveSession = (key: string, value: string) =>
  sessionStorage.setItem(key, JSON.stringify(value));
export const removeSession = (key: string) => sessionStorage.removeItem(key);
export const getLocal = (key: string) => localStorage.getItem(key) || "";
export const saveLocal = (key: string, value: any) => {
  if (typeof value === "string") {
    localStorage.setItem(key, value);
  } else {
    localStorage.setItem(key, JSON.stringify(value));
  }
};
export const removeLocal = (key: string) => localStorage.removeItem(key);
export function dataURItoBlob(dataURI: any) {
  // convert base64 to raw binary data held in a string
  // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
  var byteString = atob(dataURI.split(",")[1]);

  // separate out the mime components
  var mimeString = dataURI.split(",")[0].split(":")[1].split(";")[0];

  // write the bytes of the string to an ArrayBuffer
  var ab = new ArrayBuffer(byteString.length);

  // create a view into the buffer
  var ia = new Uint8Array(ab);

  // set the bytes of the buffer to the correct values
  for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }

  // write the ArrayBuffer to a blob, and you're done
  var blob = new Blob([ab], { type: mimeString });
  return blob;
}
